html{
    height: 100%;
}
body{
    height: 100%;
}
.left-bar{
    height: 100%;
    width: 300px;
    background-color: #212529;
    position: relative;
}
.left-title{
    height: 60px;
    line-height: 60px;
    font-size: 28px;
    color: white;
    text-align: center;
}
.left-title span{
    height: 20px;
    line-height: 20px;
}

.left-bar li{
    padding:15px 0;
    border-radius: 5px;
    transition-duration: .5s;
}
.left-bar .gongneng:hover{
    background-color:#0D6EFD;
}
.left-bar a{
    font-size: 24px;
    color:white;
    text-align: center; 
    padding-left:50px;
}
.left-bar a:hover{
    color:white;

}



.left-buttom{
    margin-top: 670px;
}

.left-buttom img{
    width: 50px;
    border-radius: 50%;
    position: absolute;
    bottom: 30px;
    left: 30px;
    transition-duration: .5s;
}
.left-buttom span{
    font-size: 24px;
    color: white;
    display: block;
    position: absolute;
    bottom: 40px;
    right: 65px;
    transition-duration: .5s;
}
.left-buttom:hover img{
    width:55px ;
}
.left-buttom:hover span{
    right:60px ;
}


.clearfix::before,
.clearfix::after{
    /* 解决外边距 */
    content: "";
    display: table;
    /* 解决高度塌陷 */
    clear: both;
}
.box{
    height: 100%;
    display: flex;
    flex-direction: row;
}
.right{
    width:100%;
    /* background-color: red; */
}

